<template>
  <div class="Follow">
    <!--<headers title="关注店铺"></headers>-->
    <div class="goodsNone" v-if="this.shopList==false">——此用户还未关注店铺——</div>
    <div class="shops" ref="wrapper" v-else>
      <div>
        <ul class="shops-list">
          <li v-for="(item, index) in shopList">
            <div class="top">
              <div class="left" @click="goin(index)">
                <div class="img">
                  <img :src="item.headImg" alt="">
                </div>

                <div class="text">
                  <span>{{item.shopName}}</span>
                  <span>已拼单：{{item.gpCount}}件</span>
                </div>
              </div>
              <div class="right">
                <div class="more" @click="more(index)">
                  更多
                  <div class="operation_order" v-show="item.state">
                    <p class="takeOff" @click="takeOff(index)">取消关注</p>
                    <p class="extend" @click="extend(index)">帮他推广</p>
                  </div>
                </div>
                <div class="goin" @click="goin(index)">进入店铺</div>
              </div>
            </div>
            <div class="bottom" ref="slider">
              <div v-if="item.mallInfoVoList.length!==0">
                <ul>
                  <li v-for="(good,goodIndex) in item.mallInfoVoList" @click="goPin(index,goodIndex)">
                    <div class="goods-pic">
                      <img :src="good.mallImg" alt="">
                    </div>
                    <div class="goods-price">
                      <div class="price">&yen {{good.salePrice/100}}</div>
                      <div class="jd">京东价：{{good.jdPrice/100}}</div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="goodsNone" v-else>—— 该店铺正在补货中，敬请关注 ——</div>
            </div>
          </li>
        </ul>
        <p class="goodsNone">{{noMore?'没有更多':'上拉加载更多'}}</p>
      </div>

    </div>

    <!--遮罩层-->
    <div class="zhezhao" v-if='zhezhao1' @click="zzceng1()">
      <div class="wenzi">
              <span class="wenzi">
              长按图片，点击"发送给好友"<br>
              扫码即刻关注店铺
            </span>
      </div>
      <div class="zzc1_content" v-if="zzc1">
        <div class="content">
          <img :src="shopList[index].headImg" alt="" class="content-img">
          <p>{{shopList[index].shopName}}</p>
          <p>更多优惠,等你来拼!</p>
          <canvas class="tupian" id="canvas"></canvas>
          <p>记得邀请好友参与，拼单更快哦！</p>
        </div>
      </div>
    </div>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
    <loading v-show="showLoading "></loading>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {
    wxHttpTool,
    wx_config,
    http_getParam,
    get_shopQrcoe,
    wx_share,
    wx_hideAllMenu
  } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  /* eslint-disable semi */
  import Vue from 'vue'
  import QRCode from 'qrcode'
  import BScroll from 'better-scroll'
  import {relogin} from "../components/httpUtil/httpUtil";

  Vue.use(QRCode)
  export default {
    name: '',
    data() {
      return {
//        show: false,
        index: 0,
        shopList: [],
        startIndex: 0,
        noMore: false,
        zhezhao1: false,
        zzc1: false,
        showAlert: false,
        showLoading: true, //显示加载动画
        alertText: null

      }
    },
    methods: {
      alertTip(msg) {
        this.showAlert = true;
        this.alertText = msg;
      },
      // 隐藏动画
      hideLoading() {
        this.showLoading = false;
      },
      // 生成店铺二维码
      useqrcode() {
//        const shopStr = window.location.search;
        const shopUrl = get_shopQrcoe(http_getParam('shopId'), 1);
//        const shopStr = this.shopInfo.shopUrl.split('?')[1].split('&');
//        console.log(shopStr)
        console.log(shopUrl)
        let canvas = document.getElementById('canvas')
        let canvs = QRCode.toCanvas(canvas, shopUrl, function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      },
      go() {
        this.showAlert = false
      },
      getData() {
        const jsonValue = JSON.stringify({
          'c': '10033',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
//            'userId': 1009, // 用户ID
            'tokenId': token(),
            'startIndex': this.startIndex,
            'pageSize': 10
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          this.hideLoading();
          console.log(res.data);
          const data = res.data.p;
          if (data.isTrue) {
            if (JSON.parse(data.shopList).length == 0) this.noMore = true
            // this.shopList = JSON.parse(data.shopList)
            this.shopList = [...this.shopList, ...JSON.parse(data.shopList)];
            console.log(this.shopList);

            // 若取关刚关注的店铺，点击首页返回时显示关注店铺列表的第一个
            // alert(this.shopList.indexOf('"id":' + http_getParam('shopId')) == -1)
            if (this.shopList.indexOf('"id":' + http_getParam('shopId')) == -1) {
              window.localStorage.param = JSON.stringify({
                shopId: this.shopList[0].id,
                shopType: 1
              })
            }

            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.wrapper, {
                  scrollY: true,
                  click: true,
                  bindToWrapper: true,
                  // probeType: 1
                })
                this.scroll.on('touchEnd', (pos) => {
                  // 下拉动作
                  if (pos.y < -30) {
                    this.startIndex++;
                    this.getData();
                  }
                })
              } else {
                this.scroll.refresh()
              }
            });
          } else {
            this.showAlert = true;
            this.alertText = data.errorMsg
            if (data.errorCode === 90) {
              this.go = () => {
                this.showAlert = false
                let _this = this
                relogin(_this)
              }
            }
          }

        }, (res) => {
          this.hideLoading();
          this.alertTip('网络错误');
          this.go = function () {
            this.showAlert = false;
          }
        })
      },
      more(index) {
        this.shopList[index].state = !this.shopList[index].state;
        for (var i = 0; i < this.shopList.length; i++) {
          if (i !== index) {
            this.shopList[i].state = 0;
          }
        }
      },
      Pro(fun) {
        return new Promise((res, rej) => {
          fun()
        })
      },
      // 取关店铺
      takeOff(index) {
        console.log(this.shopList.length)


        // alert(window.localStorage.param)
        if (this.shopList.length==1) {
          this.alertTip('此为唯一关注店铺，请高抬贵手哦~');
          this.go = function () {
            this.showAlert = false;
          }
        }
        else {
          const jsonValue = JSON.stringify({
            'c': '10054',
            'p': {
              'userId': JSON.parse(window.localStorage.data).id, // 用户ID
//            'userId': 1009, // 用户ID
              'tokenId': token(),
              'shopId': this.shopList[index].id
            }
          });
          this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
            this.hideLoading();
            console.log(res);
            const data = res.data.p;
            if (data.isTrue) {
              this.alertTip('取消关注店铺成功');
              this.go = function () {
                this.showAlert = false;
                location.reload()
              }
            } else {
              this.alertTip(data.errorMsg);
              if (data.errorCode === 90) {
                this.go = () => {
                  this.showAlert = false
                  let _this = this
                  relogin(_this)
                }
              }
            }
          }, (res) => {
            this.hideLoading();
            this.alertTip('网络错误');
            this.go = function () {
              this.showAlert = false;
            }
          })
        }

      },
      extend(index) {
//        alert('帮他推广');
        this.index = index;
        this.zhezhao1 = true;
        this.zzc1 = true;
      },
      goin(index) {
        window.localStorage.shopId = this.shopList[index].id;
        window.localStorage.index = index;
        console.log(window.localStorage.index)
        this.$router.push({name: 'mall', query: {shopId: this.shopList[index].id}})
      },
      goPin(index, goodIndex) {
        window.localStorage.mallId = this.shopList[index].mallInfoVoList[goodIndex].mallId;
        window.localStorage.msId = this.shopList[index].mallInfoVoList[goodIndex].msId;
        window.localStorage.gpId = this.shopList[index].mallInfoVoList[goodIndex].gpId;
        this.$router.push({
          path: '/pindetail',
//          params: {
//            userId: JSON.parse(window.localStorage.data).id,
//            msId: window.localStorage.msId
//          },
          query: {
            shopId: this.shopList[index].id,
            msId: window.localStorage.msId,
            gpId: window.localStorage.gpId,
            shopType: 1
          }
        });
      },
      zzceng1() {
        // 点击遮罩层关闭
        this.zhezhao1 = false;
        this.zzc1 = false;
      }
    },
    updated() {
      this.useqrcode();
    },
    created() {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis, msg_10046.entity(), function (varThis, res) {
          varThis.wxlist = res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline", "menuItem:share:QZone", "menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      }, this.type)
    },
    mounted() {
      if (window.localStorage.data) {
        this.getData()
      }
      else {
        this.hideLoading();
        this.alertTip('请先登录');
        this.go = () => {
          this.showAlert = false
          let _this = this
          relogin(_this)
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  .Follow {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
    background: #f4f4f4;

    .shops {
      /*margin-top: 80px;*/
      height: 930px;
      overflow: hidden;
      .shops-list {
        > li {
          margin-top: 20px;
          /*height: 438px;*/
          background: #ffffff;
          .top {
            height: 140px;
            border-bottom: 1px solid #F4F4F4;
            .left {
              width: 400px;
              float: left;
              .img {
                float: left;
                margin: 18px 12px 20px 28px;
                width: 92px;
                height: 92px;
                /*border: 5px solid #f4f4f4;*/
                img {
                  width: 92px;
                  height: 92px;
                  border-radius: 50%;
                }
              }
              .text {
                float: left;
                padding-top: 30px;
              }
              span:nth-child(1) {
                font-size: 28px;
                color: #3b3b43;
                display: block;
                margin-bottom: 10px;
              }
              span:nth-child(2) {
                /*float: left;*/
                font-size: 24px;
                line-height: 10px;
                color: #a1a1a1;
              }
            }
            .right {
              float: right;
              width: 230px;
              .more {
                float: left;
                font-size: 24px;
                color: #a1a1a1;
                line-height: 140px;
                position: relative;
                .operation_order {
                  width: 148px;
                  height: 148px;
                  background: url(../assets/images/more@1x.png) no-repeat;
                  position: absolute;
                  top: 100px;
                  right: -50px;
                  text-align: center;
                  background-size: 100%;
                  p {
                    width: 148px;
                    height: 50px;
                    color: #a1a1a1;
                    font-size: 22px;
                    margin-top: 10px;
                    text-align: center;
                    line-height: 70px;
                  }
                }
              }

              .goin {
                width: 147px;
                height: 60px;
                background: url("../assets/images/btn@1x.png") no-repeat;
                background-size: 100%;
                font-size: 24px;
                color: #ffffff;
                border-radius: 30px;
                text-align: center;
                line-height: 60px;
                margin-left: 65px;
                margin-top: 38px;
              }
            }
          }
          .bottom {
            width: 100%;
            overflow: hidden;
            /*height: 298px;*/
            box-sizing: border-box;
            padding: 22px;
            ul {
              overflow-x: auto;
              overflow-y: hidden;
              height: 100%;
              display: flex;
              justify-content: flex-start;
              flex-flow: row nowrap;
              li {
                margin: 0 15px;
                height: 100%;
                .goods-pic {
                  width: 180px;
                  height: 180px;
                  border: 1px solid #f4f4f4;
                  /*background: lightblue;*/
                  margin-bottom: 10px;
                  img {
                    width: 180px;
                    height: 180px;
                  }
                }
                .goods-price {
                  text-align: center;
                  .price {
                    font-size: 32px;
                    color: #fe3519;
                  }
                  .jd {
                    font-size: 20px;
                    color: #a1a1a1;
                  }
                }
              }
            }
          }
        }
      }

    }
    .goodsNone {
      color: #D3D3D3;
      height: 40px;
      text-align: center;
      padding: 20px 0;
    }
    /*立即参团遮罩层*/
    .zhezhao {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 20000;
      position: fixed;
      top: 0px;
    }

    .zhezhao .zzc1_content, .zzc2_content {
      width: 500px;
      height: 240px;
      background: #fff;
      position: absolute;
      top: 260px;
      /*right: 78px;*/
      left: 50%;
      transform: translate(-50%, 0); /*左边50%，再平移自身的-50%*/
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius: 10px;
    }

    .zhezhao .wenzi {
      width: 400px;
      height: 116px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      top: 80px;
      text-align: center;
    }

    .zhezhao .wenzi > span {
      font-size: 28px;
      color: #ffc731;
      text-align: center;
    }

    .zhezhao .zzc1_content {
      width: 490px;
      height: 604px;
      box-sizing: border-box;
      padding: 30px;
      background: linear-gradient(#f38571, #f1543e);
    }

    .zhezhao .zzc1_content .content {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 38px 30px;
      border-radius: 8px;
    }

    .zhezhao .zzc1_content .content .content-img {
      float: left;
      width: 80px;
      height: 80px;
      margin: 0 20px;
      border-radius: 50%;
    }

    .zhezhao .zzc1_content .content p:nth-child(2) {
      width: 230px;
      float: left;
      font-size: 28px;
      color: #454343;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .zhezhao .zzc1_content .content p:nth-child(3) {
      margin-top: 6px;
      width: 232px;
      float: left;
      font-size: 20px;
      color: #a1a1a1;
    }

    .zhezhao .zzc1_content .content p:last-child {
      width: 100%;
      font-size: 22px;
      color: #fe3519;
      text-align: center;
    }

    .zhezhao .zzc1_content .content .tupian {
      width: 307px !important;
      height: 307px !important;
      margin: 0 auto 0 !important;
      margin-left: 30px !important;
      border: none;
    }
    #canvas {
      width: 307px !important;
      height: 307px !important;
      margin: 0 auto 0 !important;
      margin-left: 30px !important;
      border: none;
    }
  }
</style>
